<template>
  <div class="container">
    <div class="title flex">
      <span class="words flex-item">增加个人规划</span>
      <span class="add" @tap="addplan">+</span>
    </div>
    <div class="panel" v-if="!showplan">
      <div class="header"><span class="shu"></span>{{month}}月个人规划情况</div>
      <ul class="employee_ul">
        <li class="employee_li flex" v-for="item in gusetList" :key="item.guestid">
          <span class="user_pic"><img src="/static/imgs/system_user.png" alt=""></span>
          <div class="user_info flex-item">
            <label class="user_name">客户姓名：{{item.guestname}}</label>
            <label class="user_name">月规划业绩：￥{{item.plamount}}元</label>
            <label class="user_name">规划到店时间：{{item.arrivetime}}</label>
            <!-- <label class="user_details" v-if="a.userid == item.userid && a.plfeat" v-for="(a,plan) in yearplan" :key="a.userid" :data-index="plan">规划业绩：￥{{a.plfeat ? a.plfeat : 0}}元</label>
          <label class="user_details" v-if="b.userid == item.userid" v-for="(b,result) in personresult" :key="b.userid" :data-index="result">已完成业绩：￥{{b.totalfeat || 0}}元</label> -->
          </div>
        </li>
      </ul>
    </div>
    <div class="add_container" v-if="showplan">
      <!-- <div class="redback"></div>
      <picker mode="month" :value="choosevalue" :start="starttime" :end="endtime" @change="bindMonthChange">
        <view class="picker choose">
          {{choosevalue}}
        </view>
      </picker> -->
      <div class="choose_details">
        <div class="list flex">
          <span class="words">选择客户</span>
          <span class="tool flex-item" @tap="chooseCustomer">{{customername}}</span>
        </div>
        <div class="list flex">
          <span class="words">选择到店日期</span>
          <span class="tool flex-item">
            <picker mode="date" @change="bindDateChange" fields="day" :value="choosedate" :start="datestart">
              <view class="choose">
                {{choosedate}}
              </view>
            </picker>
          </span>
        </div>
        <div class="list flex" style="height:auto;">
          <span class="words">添加备注</span>
          <textarea class="flex-item textarea" placeholder="请填写备注信息可不填" placeholder-style="padding-top:18rpx;color:rgba(153, 153, 153, 1);" />
          </div>
      <div class="buttons flex">
        <div class="butinfo flex-item" @tap="addGoods">添加产品</div>
        <div class="butinfo flex-item" @tap="addProject">添加项目</div>
      </div>
    </div>
    <div class="goods_list" v-if="chooseGoodslist.length > 0">
      <scroll-view scroll-y style="height:500rpx;">
      <div class="list_detail flex" v-for="(item,index) in chooseGoodslist" :key="item.goodsid">
        <div class="goods_name flex-item">{{item.name}} ￥{{item.price}}</div>
        <div class="stepper"><van-stepper :value="item.num" @change="stepperChange" :data-index="index"/></div>
      </div>
      </scroll-view>
    </div>
    <!-- 312*431 -->
    <van-submit-bar :price="amount * 100" button-text="提交" @submit="onSubmit" v-if="chooseGoodslist.length > 0"/>
    </div>
    <!-- 选择客户弹窗 -->
    <div class="choose_customer" v-if="customerShow" @tap="customerHide">
      <div class="customer_detail">
        <div class="choose_header">选择客户</div>
        <div class="customer_ul">
          <scroll-view scroll-y style="height: 776rpx;">
            <div class="customer_li flex" v-for="(item ,index) in customerList" :key="item.id" :data-index="index" :data-gusetid="item.id"  @tap.stop="selectCustomer">
            <div class="left flex-item">
              <span class="customer_pic">
                <img v-if="item.headurl == 0 || !item.headurl" src="/static/imgs/system_user.png">
                <img v-else :src="item.headurl">
              </span>
              <span class="customer_name">{{item.name}}</span>
            </div>
            <div class="right_arrow"></div>
          </div>
          </scroll-view>
        </div>
      </div>
    </div>
    <div class="container" v-if="!showplan">
    <Empty message="暂无规划，请添加！"></Empty>
  </div>
  </div>
</template>

<script>
import wx from 'wx'
import moment from 'moment'
import api from '@/utils/api'
import Toast from '@/utils/toast'
import Empty from '@/components/empty'
export default {
  data () {
    return {
      windowHeight: 0,
      year: moment().year(),
      month: moment().month() + 1,
      choosevalue: '',
      monthstart: '',
      datestart: '',
      num: 1,
      choosedate: '点击选择日期',
      customername: '点击选择客户名称',
      customerShow: false,
      customerList: [],
      chooseGoodslist: [],
      chooseProjectlist: [],
      gusetList: [],
      gusetid: '',
      arrivetime: '',
      showplan: false,
      starttime: '',
      endtime: ''
    }
  },
  components: {
    Empty
  },
  onLoad (option) {
    let that = this
    // 调用应用实例的方法获取全局数据
    // this.getUserInfo()
    wx.getSystemInfo({
      success (res) {
        that.windowHeight = res.windowHeight
      }
    })
    if (option) {
      this.month = option.month
      this.choosevalue = `${this.year}-${option.month}`
      this.getinfo()
    }
  },
  onShow () {
    let nowMonth = moment().month() + 1; // 当前月
    let nowYear = moment().year(); // 当前年
    let nowDay = moment().day();
    this.monthstart = `${nowYear}-${nowMonth}`;
    this.datestart = `${nowYear}-${nowMonth}-${nowDay}`;
    if (wx.getStorageSync('chooseGoodslist')) {
      this.chooseGoodslist = wx.getStorageSync('chooseGoodslist')
    }
    if (wx.getStorageSync('chooseProjectlist')) {
      this.chooseGoodslist = wx.getStorageSync('chooseProjectlist')
    }
    if (wx.getStorageSync('chooseGoodslist') && wx.getStorageSync('chooseProjectlist')) {
      this.chooseGoodslist = wx.getStorageSync('chooseGoodslist').concat(wx.getStorageSync('chooseProjectlist'))
    }
    let goodslist = []
    for (var i = 0; i < this.chooseGoodslist.length; i++) {
      if (this.chooseGoodslist[i].goodsid) {
        goodslist.push({ 'id': this.chooseGoodslist[i].goodsid, 'name': this.chooseGoodslist[i].goodsname, 'price': this.chooseGoodslist[i].price, 'num': 1, 'type': 1, 'amount': this.chooseGoodslist[i].price });
      }
    }
    this.chooseGoodslist = goodslist;
    this.starttime = `${this.year}-01`
    this.endtime = `${this.year}-12`
  },
  computed: {
    amount: function () {
      var allprice = 0;
      for (var i = 0; i < this.chooseGoodslist.length; i++) {
        allprice += this.chooseGoodslist[i].price * this.chooseGoodslist[i].num
      }
      return allprice;
    }
  },
  methods: {
    async getinfo () {
      let userid = wx.getStorageSync('userInfo').user_id;
      if (wx.getStorageSync('plan') === 'add') {
        this.showplan = true
        let day = moment(`${wx.getStorageSync('planyear')}-${wx.getStorageSync('planmonth')}`, 'YYYY-MM').daysInMonth();
        let starttime = moment(`${wx.getStorageSync('planyear')}-${wx.getStorageSync('planmonth')}-01 00:00:00`, 'YYYY-MM-DD hh:mm:ss').unix();
        let endtime = moment(`${wx.getStorageSync('planyear')}-${wx.getStorageSync('planmonth')}-${day} 23:59:59`, 'YYYY-MM-DD hh:mm:ss').unix();
        let res = await api.getworkermonthplan({ user_id: userid, start_time: starttime, end_time: endtime });
        if (res.code === '100') {
          if (res.data.length > 0) {
            this.showplan = false
          } else {
            this.showplan = true
          }
          res.data.forEach(item => {
            item.arrivetime = moment.unix(item.arrivetime).format('YYYY-MM-DD');
          });
          this.gusetList = res.data
        } else {
          this.gusetList = []
        }
      } else {
        let day = moment(`${this.year}-${this.month}`, 'YYYY-MM').daysInMonth();
        let starttime = moment(`${this.year}-${this.month}-01 00:00:00`, 'YYYY-MM-DD hh:mm:ss').unix();
        let endtime = moment(`${this.year}-${this.month}-${day} 23:59:59`, 'YYYY-MM-DD hh:mm:ss').unix();
        let res = await api.getworkermonthplan({ user_id: userid, start_time: starttime, end_time: endtime });
        if (res.code === '100') {
          if (res.data.length > 0) {
            this.showplan = false
          } else {
            this.showplan = true
          }
          res.data.forEach(item => {
            item.arrivetime = moment.unix(item.arrivetime).format('YYYY-MM-DD');
          });
          this.gusetList = res.data
        } else {
          this.gusetList = []
        }
      }
    },
    bindMonthChange (e) {
      console.log(e.mp.detail.value)
      this.choosevalue = e.mp.detail.value
      this.year = this.choosevalue.split('-')[0]
      this.month = parseInt(this.choosevalue.split('-')[1])
    },
    bindDateChange (e) {
      console.log(e.mp)
      this.choosedate = e.mp.detail.value;
      this.year = this.choosedate.split('-')[0]
      this.month = this.choosedate.split('-')[1]
      wx.setStorageSync('planyear', this.year)
      wx.setStorageSync('planmonth', this.month)
      this.arrivetime = moment(this.choosedate, 'YYYY-MM-DD').unix();
    },
    stepperChange (e) {
      let index = e.mp.currentTarget.dataset.index;
      let detail = e.mp.detail;
      this.chooseGoodslist[index].num = detail;
    },
    // addnum (key) {
    //   vm.goods_list[key].num += 1;
    // },
    // delnum (key) {
    //   if (vm.goods_list[key].num <= 1) { api.toast({ msg: '数量不能小于1', duration: 1000, location: 'middle' }); return false; } else {
    //     vm.goods_list[key].num -= 1;
    //   }
    // },
    addGoods () {
      wx.navigateTo({
        url: '/pages/guest/productSelection/productSelection'
      })
    },
    addProject () {
      wx.navigateTo({
        url: '/pages/guest/projectSelection/projectSelection'
      })
    },
    async chooseCustomer () {
      let userid = wx.getStorageSync('userInfo').user_id;
      const ret = await api.getguestmyfuwu({ user_id: userid });
      if (ret.code === '100') {
        this.customerList = ret.data;
        this.customerShow = true;
      } else {
        this.customerList = [];
        Toast(ret.msg);
      }
    },
    selectCustomer (e) {
      console.log(e.mp.currentTarget.dataset.index)
      let index = e.mp.currentTarget.dataset.index;
      this.customername = this.customerList[index].name;
      this.gusetid = this.customerList[index].id;
      this.customerShow = false;
    },
    customerHide () {
      this.customerShow = false;
    },
    addplan () {
      this.showplan = true
    },
    async onSubmit () {
      if (this.gusetid === '') {
        Toast('请选择客户！');
        return false;
      }
      if (this.arrivetime === '') {
        Toast('请选择日期');
        return false;
      }
      let postInfo = {};
      let userid = wx.getStorageSync('userInfo').user_id;
      postInfo['userid'] = userid;
      postInfo['guestid'] = this.gusetid;
      postInfo['amount'] = this.amount;
      postInfo['arrivetime'] = this.arrivetime;
      const ret = await api.postaddplaninfo({ post_info: postInfo, order_info: this.chooseGoodslist });
      if (ret.code === '100') {
        Toast('提交成功', 'success');
        this.customername = '点击选择客户名称'
        this.choosedate = '点击选择日期'
        this.arrivetime = ''
        wx.removeStorageSync('chooseGoodslist');
        wx.removeStorageSync('chooseProjectlist');
        wx.removeStorageSync('planyear');
        wx.removeStorageSync('planmonth');
        wx.removeStorageSync('plan');
        this.showplan = false
        this.gusetid = ''
        this.getinfo()
      } else {
        Toast(ret.msg);
      }
    }
  }
}
</script>

<style scoped>
.container {
  background: RGBA(153, 153, 153, 0.1) !important;
}
.redback {
  width: 100%;
  height: 60rpx;
  background: #ff4444;
}
.picker {
  position: absolute;
  top: 24rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 400rpx;
  height: 64rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0rpx 6rpx 20rpx rgba(255, 68, 68, 0.2);
  opacity: 1;
  border-radius: 32rpx;
  color: rgba(51, 51, 51, 1);
  line-height: 64rpx;
  font-size: 28rpx;
  text-align: center;
}
.picker::after {
  content: '';
  position: absolute;
  top: 25rpx;
  right: 104rpx;
  width: 26rpx;
  height: 16rpx;
  background: url(http://mytimg.178mr.com/black_arrow3.png) no-repeat;
  background-size: 100%;
}
.choose_details {
  background: #fff;
  padding: 64rpx 28rpx;
}
.choose_details .list {
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 2rpx solid rgba(153, 153, 153, 0.1);
}
.choose_details .list:last-child {
  border-bottom: none;
}
.choose_details .list .words {
  font-size: 28rpx;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-right: 34rpx;
}
.choose_details .list .tool {
  font-size: 28rpx;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  opacity: 1;
}
.textarea {
  padding-top: 18rpx;
  box-sizing: border-box;
  height: 128rpx;
  font-size: 28rpx;
}
.buttons {
  width: 432rpx;
  margin: 0 auto;
  margin-top: 40rpx;
}
.buttons .butinfo {
  width: 160rpx;
  height: 56rpx;
  background: linear-gradient(
    180deg,
    rgba(255, 68, 68, 0.6) 0%,
    rgba(255, 68, 68, 1) 100%
  );
  box-shadow: 0rpx 6rpx 12rpx rgba(255, 68, 68, 0.15);
  opacity: 1;
  border-radius: 24rpx;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 56rpx;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  margin-right: 112rpx;
}
.buttons .butinfo:last-child {
  margin-right: 0;
}
.goods_list {
  width: 100%;
  margin-top: 16rpx;
  background: #fff;
  padding: 32rpx;
  max-height: 500rpx;
}
.list_detail {
  width: 100%;
  font-size: 32rpx;
  font-weight: 400;
  line-height: 42rpx;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-bottom: 34rpx;
}
.list_detail:last-child {
  margin: 0;
}
.choose_customer {
  /* 312*431 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 111;
}
.choose_customer .customer_detail {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 624rpx;
  height: 862rpx;
  background: rgba(255, 255, 255, 1);
  border-radius: 24rpx;
}
.choose_header {
  width: 100%;
  height: 86rpx;
  line-height: 86rpx;
  text-align: center;
  font-size: 32rpx;
  color: rgba(255, 68, 68, 1);
  border-bottom: 1rpx solid rgba(153, 153, 153, 0.1);
}
.right_arrow {
  position: absolute;
  top: 50%;
  right: 28rpx;
  width: 12rpx;
  height: 28rpx;
  background: url(http://mytimg.178mr.com/grey_arrow.png) no-repeat;
  background-size: 100%;
  transform: translateY(-50%);
}
.customer_ul {
  width: 100%;
  padding-left: 20rpx;
}
.customer_ul .customer_li {
  width: 100%;
  font-size: 32rpx;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  border-bottom: 1rpx solid rgba(153, 153, 153, 0.1);
  position: relative;
}
.customer_pic {
  display: inline-block;
  width: 60rpx;
  height: 60rpx;
  position: relative;
  top: 10rpx;
  margin-right: 20rpx;
}
.customer_pic img {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
}
.customer_name {
  display: inline-block;
  height: 60rpx;
  position: relative;
  top: -5rpx;
}
.panel {
  width: 100%;
  background: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
  font-size: 28rpx;
}
.employee_ul {
  width: 100%;
  padding-left: 32rpx;
  background: #fff;
}
.employee_ul .employee_li {
  width: 100%;
  padding: 28rpx 0;
  font-size: 28rpx;
  border-bottom: 2rpx solid RGBA(153, 153, 153, 0.2);
}
.employee_ul .employee_li .user_pic {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
.employee_ul .employee_li img {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
}
.employee_ul .employee_li .user_info label {
  display: block;
}
.employee_ul .employee_li .user_info .user_name {
  font-size: 32rpx;
  font-weight: 400;
  line-height: 42rpx;
  color: rgba(102, 102, 102, 1);
  margin-bottom: 10rpx;
}
.employee_ul .employee_li .user_info .user_details {
  font-size: 24rpx;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
}
.employee_ul .employee_li .user_info .user_details.red {
  color: #ff4444;
}
.panel {
  width: 100%;
  background: rgba(255, 255, 255, 1);
  margin: 0 auto;
  padding: 28rpx;
}
.panel .header {
  font-size: 32rpx;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  margin-bottom: 20rpx;
}
.panel .header .shu {
  display: inline-block;
  width: 4rpx;
  height: 20rpx;
  background: rgba(255, 68, 68, 1);
  border-radius: 2rpx;
  margin-right: 12rpx;
}
.title {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
  color: #333;
  background: #fff;
  margin-bottom: 20rpx;
}
.title .add {
  width: 80rpx;
  height: 60rpx;
  background: #ff4444;
  text-align: center;
  line-height: 60rpx;
  color: #fff;
  font-size: 24rpx;
  border-radius: 10rpx;
}
</style>
